<template>
    <div class="sjzxContent" >  
        <!-- 向左按钮 -->
        <!-- <div
            :class="{ toLeft: true, leftButtonChange: !leftPanelShow }"
            @click="leftPanelHide()"
        ></div> -->
        <!-- 专题图名称 -->
        <div
            v-show="!$store.state.leftPanelShow"
            :class="{
                themePicTitle: true,
                themePicTitleChange: !$store.state.leftPanelShow,
            }"
        >
            {{ $store.state.thematicMapName }}专题图
        </div>
        <!-- 专题图图例 -->
        <FxffLegend v-if="$store.state.fxffLegendShow" />
        <FireLegend v-if="$store.state.fireLegendShow" />
        <!-- 向右按钮 -->
        <div
            :class="{ toRight: true, rightButtonChange: !rightPanelShow }"
            title="切换专题图模式"
            @click="rightPanelHide()"
        ></div>
        <!-- 左侧面板   -->
        <div
            :class="{
                sjzxLeft: true,
                animate__faster: true,
                animate__animated: true,
                animate__fadeInLeft: $store.state.leftPanelShow,
                animate__fadeOutLeft: !$store.state.leftPanelShow,
            }"
        >
            <component :is="$store.state.sjzxLeftCurrentComponent" />
        </div>
        <!-- 右侧面板 -->
        <div
            :class="{
                sjzxRight: true,
                animate__faster: true,
                animate__animated: true,
                animate__fadeInRight: rightPanelShow,
                animate__fadeOutRight: !rightPanelShow,
            }"
        >
            <SjzxRight />
        </div>
        <!-- 数据中心详情页面 -->
        <div
            :class="{
                sjzxBasicDetail: true,
                animate__faster: true,
                animate__animated: true,
                animate__fadeInLeft: $store.state.sjzxBasicDetail,
            }"
            v-if="$store.state.sjzxBasicDetail"
        >
            <SjzxBasicDetail />
        </div>
        
        <!-- <Search v-show="$store.state.leftPanelShow" /> -->
        <!-- 树控件 -->
        <FireDetail v-if="$store.state.showFireDetail" />
        <div class="InfoBoxContent">
            <!-- 水库，漫水桥，危房，旅游景区景点，易淹易涝点(区)，渔港，塔吊 -->
            <div class="infoBox-class-1" id="infoBox1">
                <i class="close el-icon-close" @click="hiddenInfoBox"></i>
                <div class="info-box-header" v-if="$store.state.infoBoxThreeContent">
                    <!-- 水库 -->
                    {{
                        $store.state.infoBoxThreeContent["隐患基本情况"]["水库工程名称"]
                            ? $store.state.infoBoxThreeContent["隐患基本情况"]["水库工程名称"]
                            : ""
                    }}
                    <!-- 漫水桥 -->
                    {{
                        $store.state.infoBoxThreeContent["隐患基本情况"]["漫水桥(路)类型"]
                            ? $store.state.infoBoxThreeContent["隐患基本情况"]["漫水桥(路)类型"]
                            : ""
                    }}
                    <!-- 危房 -->
                    {{
                        $store.state.infoBoxThreeContent["隐患基本情况"]["危房户主姓名"]
                            ? $store.state.infoBoxThreeContent["隐患基本情况"]["危房户主姓名"]
                            : ""
                    }}
                    <!-- 旅游景区景点 -->
                    {{
                        $store.state.infoBoxThreeContent["隐患基本情况"]["景区景点名称"]
                            ? $store.state.infoBoxThreeContent["隐患基本情况"]["景区景点名称"]
                            : ""
                    }}
                    <!-- 易淹易涝点(区) -->
                    {{
                        $store.state.infoBoxThreeContent["隐患基本情况"]["易淹易涝点(区)类型"]
                            ? $store.state.infoBoxThreeContent["隐患基本情况"]["易淹易涝点(区)类型"]
                            : ""
                    }}
                    <!-- 渔港 -->
                    {{
                        $store.state.infoBoxThreeContent["隐患基本情况"]["渔港名称"]
                            ? $store.state.infoBoxThreeContent["隐患基本情况"]["渔港名称"]
                            : ""
                    }}
                    <!-- 塔吊 -->
                    {{
                        $store.state.infoBoxThreeContent["隐患基本情况"]["塔吊具体地址"]
                            ? $store.state.infoBoxThreeContent["隐患基本情况"]["塔吊具体地址"]
                            : ""
                    }}
                </div>
                <div class="PoiInfoBox">
                    <el-tabs v-model="activeName" @tab-click="handleClick">
                        <el-tab-pane label="隐患基本情况" name="first">
                            <div class="resource-form-table-box">
                                <div class="item-box el-row"
                                    v-for="(value, key, index) in $store.state
                                    .infoBoxThreeContent['隐患基本情况']"
                                    :key="index"
                                >
                                    <div class="label-box el-col el-col-10">
                                        {{ key }}
                                    </div>
                                    <div class="value-box el-col el-col-14">
                                        :&nbsp;{{ value == "null" ? "暂无" : value }}
                                    </div>
                                </div>
                            </div>
                        </el-tab-pane>
                        <el-tab-pane label="市县落实情况" name="second">
                            <div class="resource-form-table-box">
                                <div class="item-box el-row"
                                    v-for="(value, key, index) in $store.state
                                    .infoBoxThreeContent['市县落实情况']"
                                    :key="index"
                                >
                                    <div class="label-box el-col el-col-10">
                                        {{ key }}
                                    </div>
                                    <div class="value-box el-col el-col-14">
                                        :&nbsp;{{ value == "null" ? "暂无" : value }}
                                    </div>
                                </div>
                            </div>
                        </el-tab-pane>
                        <el-tab-pane label="省级行业主管部门核查情况" name="third">
                            <div class="resource-form-table-box">
                                <div class="item-box el-row"
                                    v-for="(value, key, index) in $store.state
                                    .infoBoxThreeContent['省级行业主管部门核查情况']"
                                    :key="index"
                                >
                                    <div class="label-box el-col el-col-10">
                                        {{ key }}
                                    </div>
                                    <div class="value-box el-col el-col-14">
                                        :&nbsp;{{ value == "null" ? "暂无" : value }}
                                    </div>
                                </div>
                            </div>
                        </el-tab-pane>
                    </el-tabs>
                </div>
            </div>
            <!-- 渔船 -->
            <div class="infoBox-class-1" id="infoBox2">
                <i class="close el-icon-close" @click="hiddenInfoBox"></i>
                <p class="title">
                    {{
                        $store.state.ycList.length > 0
                            ? $store.state.ycList.length
                            : ""
                    }}艘渔船
                </p>
                <!-- v-show="key !== 'id' && key !== '序号'"	 -->
                <div class="PoiInfoBox">
                    <el-descriptions
                        v-for="(item, index) in $store.state.ycList"
                        :key="index"
                        class="margin-top"
                        :column="3"
                        direction="vertical"
                        border
                    >
                        <el-descriptions-item label="渔船名称">
                            {{ item.name }}
                        </el-descriptions-item>
                        <el-descriptions-item label="负责人">
                            {{ item.charge }}
                        </el-descriptions-item>
                        <el-descriptions-item label="负责人电话">
                            {{ item.phone }}
                        </el-descriptions-item>
                        <el-descriptions-item label="地址">
                            {{ item.address }}
                        </el-descriptions-item>
                    </el-descriptions>
                </div>
            </div>
            <!-- 突发事件 -->
            <div class="infoBox-class-1" id="infoBox3" >
                <i class="close el-icon-close" @click="hiddenInfoBox"></i>
                <div class="info-box-header">突发事件</div>
                <!-- v-show="key !== 'id' && key !== '序号'"	 -->
                <!-- {{ value == "null" ? "暂无" : value }} -->
                <div class="PoiInfoBox" v-if='$store.state.infoBoxContent'>
                    <el-tabs v-model="eventActiveName" @tab-click="handleClick">
                        <el-tab-pane label="突发事件基本情况" name="firstEvent">
                            <div class="resource-form-table-box">
                                <template  v-for="(value, key, index) in $store.state.infoBoxContent"
                                    :key="index">
                                    <div class="item-box el-row"
                                    v-if="key!='正文描述'"
                                    >
                                        <div class="label-box el-col el-col-10">
                                            {{ key }}
                                        </div>
                                        <div class="value-box el-col el-col-14">
                                            :&nbsp;{{ value == "null" ? "暂无" : value }}
                                        </div>
                                    </div>
                                </template>
                            </div>
                        </el-tab-pane>
                        <el-tab-pane label="正文描述" name="secondEvent">
                            <div class="resource-form-table-box">
                                <template  v-for="(value, key, index) in $store.state.infoBoxContent"
                                    :key="index">
                                    <div class=""
                                    v-if="key=='正文描述'"
                                    >
                                        <div style="line-height:25px;" v-html="$store.state.infoBoxContent['正文描述']">

                                        </div>
                                    </div>
                                </template>
                            </div>
                        </el-tab-pane>
                    </el-tabs>   
                    <div class="exportEvent">
                        <!-- <div @click="zhuanbao">专报查看</div>
                        <div @click="zhuanbaoDownload">专报下载</div> -->
                        <!-- <div @click="yingxiangfenxi">影响分析</div> -->
                    </div>
                </div>
            </div>
            <!-- 火情POI, 突发事件, 生产安全事故, 历史火情POI, 历史生产安全事故-->
            <div class="infoBox-class-1" id="infoBox6" >
                <i class="close el-icon-close" @click="hiddenInfoBox"></i>
                <div class="info-box-header">详细信息</div>
                <!-- v-show="key !== 'id' && key !== '序号'"	 -->
                <!-- {{ value == "null" ? "暂无" : value }} -->
                <div class="PoiInfoBox" v-if='$store.state.infoBoxContent'>
                    <div class="resource-form-table-box">
                        <template  v-for="(value, key, index) in $store.state.infoBoxContent"
                            :key="index">
                            <div class="item-box el-row"
                            >
                                <div class="label-box el-col el-col-10">
                                    {{ key }}
                                </div>
                                <div class="value-box el-col el-col-14">
                                    :&nbsp;{{ value == "null" ? "暂无" : value }}
                                </div>
                            </div>
                        </template>
                    </div>
                    <div class="exportEvent">
                        <!-- <div @click="zhuanbao">专报查看</div>
                        <div @click="zhuanbaoDownload">专报下载</div> -->
                        <!-- <div @click="yingxiangfenxi">影响分析</div> -->
                    </div>
                </div>
            </div>
            <!-- 地质灾害隐患点详情 -->
            <div class="infoBox-class-1" id="infoBox4">
                <i class="close el-icon-close" @click="hiddenInfoBox"></i>
                <div class="info-box-header" v-if="$store.state.infoBoxThreeContent">
                    <span>
                        {{
                            $store.state.infoBoxThreeContent["隐患基本情况"]["地质灾害隐患点编号或具体地点"]
                        }}
                    </span>
                    <span
                        class="el-icon-camera-solid"
                        style="cursor:pointer;padding-left:10px;"
                        v-if="$store.state.infoBoxThreeContent['隐患基本情况']['全景图文件名']"
                        title="查看全景图"
                        @click="quanjing($store.state.infoBoxThreeContent['隐患基本情况']['全景图文件名'])"
                    ></span>
                </div>
                <!-- v-show="key !== 'id' && key !== '序号'"	 -->
                <div class="PoiInfoBox">
                    <el-tabs v-model="activeName" @tab-click="handleClick">
                        <el-tab-pane label="隐患基本情况" name="first">
                            <div class="resource-form-table-box">
                                <div class="item-box el-row"
                                    v-for="(value, key, index) in $store.state
                                    .infoBoxThreeContent['隐患基本情况']"
                                    :key="index"
                                >
                                    <div class="label-box el-col el-col-10">
                                        {{ key }}
                                    </div>
                                    <div class="value-box el-col el-col-14">
                                        :&nbsp;{{ value == "null" ? "暂无" : value }}
                                    </div>
                                </div>
                            </div>
                        </el-tab-pane>
                        <el-tab-pane label="市县落实情况" name="second">
                            <div class="resource-form-table-box">
                                <div class="item-box el-row"
                                    v-for="(value, key, index) in $store.state
                                    .infoBoxThreeContent['市县落实情况']"
                                    :key="index"
                                >
                                    <div class="label-box el-col el-col-10">
                                        {{ key }}
                                    </div>
                                    <div class="value-box el-col el-col-14">
                                        :&nbsp;{{ value == "null" ? "暂无" : value }}
                                    </div>
                                </div>
                            </div>
                        </el-tab-pane>
                        <el-tab-pane label="省级行业主管部门核查情况" name="third">
                            <div class="resource-form-table-box">
                                <div class="item-box el-row"
                                    v-for="(value, key, index) in $store.state
                                    .infoBoxThreeContent['省级行业主管部门核查情况']"
                                    :key="index"
                                >
                                    <div class="label-box el-col el-col-10">
                                        {{ key }}
                                    </div>
                                    <div class="value-box el-col el-col-14">
                                        :&nbsp;{{ value == "null" ? "暂无" : value }}
                                    </div>
                                </div>
                            </div>
                        </el-tab-pane>
                    </el-tabs>
                </div>
            </div>
            <!-- 火情，生产安全事故 -->
            <div class="infoBox-class-1" id="infoBox5">
                <i class="close el-icon-close" @click="hiddenInfoBox"></i>
                <div class="info-box-header" v-if="$store.state.infoBoxContent">
                    <!-- 水库 -->
                    {{
                        $store.state.infoBoxContent["水库工程名称"]
                            ? $store.state.infoBoxContent["水库工程名称"]
                            : ""
                    }}
                    <!-- 漫水桥 -->
                    {{
                        $store.state.infoBoxContent["漫水桥(路)类型"]
                            ? $store.state.infoBoxContent["漫水桥(路)类型"]
                            : ""
                    }}
                    <!-- 危房 -->
                    {{
                        $store.state.infoBoxContent["危房户主姓名"]
                            ? $store.state.infoBoxContent["危房户主姓名"]
                            : ""
                    }}
                    <!-- 旅游景区景点 -->
                    {{
                        $store.state.infoBoxContent["景区景点名称"]
                            ? $store.state.infoBoxContent["景区景点名称"]
                            : ""
                    }}
                    <!-- 易淹易涝点(区) -->
                    {{
                        $store.state.infoBoxContent["易淹易涝点(区)类型"]
                            ? $store.state.infoBoxContent["易淹易涝点(区)类型"]
                            : ""
                    }}
                    <!-- 渔港 -->
                    {{
                        $store.state.infoBoxContent["渔港名称"]
                            ? $store.state.infoBoxContent["渔港名称"]
                            : ""
                    }}
                    <!-- 塔吊 -->
                    {{
                        $store.state.infoBoxContent["塔吊具体地址"]
                            ? $store.state.infoBoxContent["塔吊具体地址"]
                            : ""
                    }}
                    <!-- 火情POI详情 -->
                    {{ $store.state.infoBoxContent["poiNAME"]?$store.state.infoBoxContent["poiNAME"]: ""}}
                    <!-- 历史生产安全事故 -->
                    {{ $store.state.infoBoxContent["事故发生单位"]?$store.state.infoBoxContent["事故发生单位"]: ""}}
                </div>
                <div class="PoiInfoBox">
                    <el-tabs v-model="activeName" @tab-click="handleClick">
                        <el-tab-pane label="隐患基本情况" name="first">
                            <div class="resource-form-table-box">
                                <div class="item-box el-row"
                                    v-for="(value, key, index) in $store.state
                                    .infoBoxThreeContent['隐患基本情况']"
                                    :key="index"
                                >
                                    <div class="label-box el-col el-col-10">
                                        {{ key }}
                                    </div>
                                    <div class="value-box el-col el-col-14">
                                        :&nbsp;{{ value == "null" ? "暂无" : value }}
                                    </div>
                                </div>
                            </div>
                        </el-tab-pane>
                        <el-tab-pane label="市县落实情况" name="second">
                            <div class="resource-form-table-box">
                                <div class="item-box el-row"
                                    v-for="(value, key, index) in $store.state
                                    .infoBoxThreeContent['市县落实情况']"
                                    :key="index"
                                >
                                    <div class="label-box el-col el-col-10">
                                        {{ key }}
                                    </div>
                                    <div class="value-box el-col el-col-14">
                                        :&nbsp;{{ value == "null" ? "暂无" : value }}
                                    </div>
                                </div>
                            </div>
                        </el-tab-pane>
                        <el-tab-pane label="省级行业主管部门核查情况" name="third">
                            <div class="resource-form-table-box">
                                <div class="item-box el-row"
                                    v-for="(value, key, index) in $store.state
                                    .infoBoxThreeContent['省级行业主管部门核查情况']"
                                    :key="index"
                                >
                                    <div class="label-box el-col el-col-10">
                                        {{ key }}
                                    </div>
                                    <div class="value-box el-col el-col-14">
                                        :&nbsp;{{ value == "null" ? "暂无" : value }}
                                    </div>
                                </div>
                            </div>
                        </el-tab-pane>
                    </el-tabs>
                </div>
            </div>
        </div>
        <EventReport
            v-if="showReport === '专报'"
            :eventInfo="currentEvent"
        ></EventReport>
        <ProductionDangerAccidentDayFormDetail
            v-if="$store.state.dangerDayForm"
        />
        <Viewer />
    </div>
</template>

<script>
// 左侧数据中心
import SjzxBasic from "./sjzxLeft/SjzxBasic";
// 弹出的左侧数据中心
import SjzxBasicDetail from "./sjzxLeft/SjzxBasicDetail";
// 两个图例
import FxffLegend from "./sjzxRight/thematicMap/fxffThematicMap/Legend";
import FireLegend from "./sjzxLeft/FireLegend";

// 一，专题图
// 防汛防风专题图
// 森林火情专题图
import FxffThematicMapDetail from "./sjzxRight/thematicMap/fxffThematicMap/Detail";
import FireThematicMapDetail from "./sjzxRight/thematicMap/fireThematicMap/FireThematicMapDetail";

// 二，专题报告
// 森林火情专题报告
// 突发事件专题报告
import FireMonitorSimpleReportCheck from "./sjzxLeft/thematicReport/FireMonitorSimpleReportCheck";
import EmergencyReportDetail from "./sjzxLeft/thematicReport/EmergencyReportDetail";
import FireMonitorDayReportCheck from "./sjzxLeft/thematicReport/FireMonitorDayReportCheck";

// 三，专题报表
// 防汛防风 专题报表
// 生产安全事故 专题报表
import FxffFormDetail from "./sjzxLeft/thematicForm/FxffFormDetail";
import ProductionDangerAccidentDayFormDetail from "./sjzxLeft/thematicForm/ProductionDangerAccidentDayFormDetail";

// 四，统计分析
// 历史火情监测
// 历史生产安全事故
// 历史森林火灾
import HistoryFireMonitorDetail from "./sjzxLeft/analysis/HistoryFireMonitorDetail";
import HistoryProductionDangerAccidentDetail from "./sjzxLeft/analysis/HistoryProductionDangerAccidentDetail";
import HistoryFireDetail from "./sjzxLeft/analysis/HistoryFireDetail.vue";

import EventReport from "./sjzxRight/thematicReport/emergencyReport/EventReport.vue";
//搜索组件
import Search from "./sjzxRight/Search";
import FireDetail from "../fire/FireMap/FireDetail";
import SjzxRight from "./sjzxRight/SjzxRight";
// import DangerDayForm from "./Danger";
import axios from "axios";
import Viewer from "./Viewer";
import { ElMessage } from "element-plus";
window.entitiesArr = [];
import {
    defineComponent,
    getCurrentInstance,
    onMounted,
    ref,
    provide,
    watch,
    onBeforeUnmount,
} from "vue";
import { useStore } from "vuex";
const leftPanelButtonEffect = () => {
    const store = useStore();
    let leftPanelShow = ref(true);
    let leftPanelHide = () => {
        leftPanelShow.value = !leftPanelShow.value;
        store.commit("changeSjzxLegendPosition", leftPanelShow.value);
    };
    return {
        leftPanelShow,
        leftPanelHide,
    };
};
const rightPanelButtonEffect = () => {
    let store = useStore();
    let rightPanelShow = ref(true);
    let rightPanelHide = () => {
        rightPanelShow.value = !rightPanelShow.value;
        store.commit("changeLeftPanelShow", rightPanelShow.value);
        store.commit("changeSjzxLegendPosition", rightPanelShow.value);
    };
    return {
        rightPanelShow,
        rightPanelHide,
    };
};
export default defineComponent({
    components: {
        SjzxRight,
        SjzxBasic,
        SjzxBasicDetail,
        //图例
        FxffLegend,
        FireLegend,
        //专题图
        FxffThematicMapDetail, //1，防汛防风
        FireThematicMapDetail, //2, 火险等级

        //专题报告
        FireMonitorSimpleReportCheck, //1,火情监测
        FireMonitorDayReportCheck,
        EmergencyReportDetail, //2,突发事件

        //专题报表
        FxffFormDetail, //1,防汛防风
        ProductionDangerAccidentDayFormDetail, //生产安全事故
        //统计分析
        HistoryFireMonitorDetail, //历史火情监测
        HistoryProductionDangerAccidentDetail, //历史生产安全事故
        HistoryFireDetail, //历史生产安全事故
        //
        //LeftReportFireDay,
        //其他
        Search,
        FireDetail,
        EventReport,
        // DangerDayForm,

        //全景
        Viewer,
    },
    setup() {
        let showReport = ref(false);
        let currentEvent = ref(null);
        let activeName = ref("first");
        let eventActiveName = ref("firstEvent")
        onBeforeUnmount(() => {
            layerManager.removeAll();
        });
        const { leftPanelShow, leftPanelHide } = leftPanelButtonEffect();
        const { rightPanelShow, rightPanelHide } = rightPanelButtonEffect();
        let store = useStore();
        // let currentComponent = ref(null)
        // currentComponent.value = store.state.currentComponent
        // watch(()=>store.state.currentComponent,(newValue)=>{
        //     currentComponent.vlaue = newValue
        // })
        const hiddenInfoBox = event => {
            Object.keys;
            event.currentTarget.parentNode.style.display = "none";
            showReport.value = "无";
            activeName.value = 'first'
        };
        const zhuanbao = () => {
            //全局有个eventID
            axios
                .get(`${sjzxUrl}/api/disaster/one?id=${window.eventId}`)
                .then(res => {
                    currentEvent.value = res.data.data;
                    showReport.value = "专报";
                });

            //store.commit("changeSjzxLeftCurrentComponent", "");
        };
        //下载专报
        const zhuanbaoDownload = () => {
            window.open(
                `${sjzxUrl}/api/disaster/download/specialReport?id=${window.eventId}`
            );
        };
        //简报下载
        const jianbaoDownload = () => {
            ElMessage.error("正在建设中");
            //window.open(`${sjzxUrl}/api/disaster/download/briefReport?id${window.eventId}`)
        };
        // 显示全景
        const quanjing = name => {
            store.commit("changePsvUrl", `/qj/panoramagram/${name}`);
            //store.commit("changePsvUrl", `https://59.212.147.69:8889/panoramagram/${name}`);
        };
        const handleClick = ()=>{}
        const yingxiangfenxi = ()=>{

        }
        onMounted(() => {
            // window.viewer.scene.requestRenderMode = true;

            //转义成html
            // function getHTML(str) { 
            //     let ele = document.createElement("div"); 
            //     ele.innerHTML = str; 
            //     return ele.textContent; 
            // } 
            console.log(store.state.userRegion)
            if(store.state.userRegion=="海南省"){

            }else{
                store.commit("changeSjzxLeftCurrentComponent", "");
            }
            
        });
        return {
            leftPanelShow,
            leftPanelHide,
            rightPanelShow,
            rightPanelHide,
            hiddenInfoBox,
            zhuanbao,
            showReport,
            currentEvent,
            zhuanbaoDownload,
            jianbaoDownload,
            quanjing,
            activeName,
            handleClick,
            eventActiveName,
            yingxiangfenxi
        };
    },
});
</script>
<style lang="stylus">
.PoiInfoBox::-webkit-scrollbar {
    /*滚动条整体样式*/
    width: 5px; /*高宽分别对应横竖滚动条的尺寸*/
    height: 1px;
}
.PoiInfoBox::-webkit-scrollbar-thumb {
    /*滚动条里面小方块*/
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    background: #535353;
}
.PoiInfoBox::-webkit-scrollbar-track {
    /*滚动条里面轨道*/
    -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.5);
}
.PoiInfoBox{
    .el-tabs__header {
        width: 100%;
        margin: 0 0 vh(18);
        z-index: 19;
        .el-tabs__nav-wrap {
            height: vh(30);
            line-height: vh(30);
            // min-width: vw1(2000);
            background: rgba(4, 34, 45, 0.37);
            .el-tabs__nav-prev, .el-tabs__nav-next {
                line-height: vh(30);
                color: #fff;
                font-size: vw(16);
            }
            .el-tabs__item {
                height: vh(30);
                min-width: vw(170);
                color: #fff;
                line-height: vh(30);
                font-size: vw(16);
                text-align: center;
            }
            .el-tabs__item.is-active {
               
            }
            .el-tabs__active-bar {
                width: vw(144)!important;
                background-color: #26cffe;
            }
            &::after {
                visibility: hidden;
                // background-color: none;
            }
        }
    }
}  
.InfoBoxContent .el-descriptions__body {
    background: transparent;
}
.InfoBoxContent .el-descriptions__label.is-bordered-label {
    background: transparent;
}
.InfoBoxContent .el-descriptions__body table {
    margin-top: 20px;
}
</style>
<style lang="stylus" scoped>
@media (max-width: 2880px) {
    .InfoBoxContent {
        position: fixed;
        z-index:2020;
        // visibility: hidden;
        .infoBox-class-1 {
            width: vw(700);
            position: fixed;
            color: #fff;
            background: rgba(0, 13, 22, 0.8);
            border: 1px solid rgba(127, 255, 255, 0.25);
            .close {
                position: absolute;
                top: 0px;
                right: 10px;
                font-size:vw(20);
                line-height:vh(50);
                cursor: pointer;
            }
            .title {
                text-align: center;
                font-size: vw(18);
                padding-bottom:vh(15);
            }
            .info-box-header{
                padding: 10px 20px;
                background-color: #01C7FF;
                line-height: 24px;
                height: 38px;
                font-size: 18px;
                display: flex;
                .info-box-header-title{

                }
            }
            .PoiInfoBox {
                overflow: auto;
                padding: 10px;
                .resource-form-table-box{
                    display:flex;
                    justify-content:space-between;
                    flex-wrap :wrap;
                    font-size:14px;
                    width:100%;
                    height: vh(300);
                    overflow-y:scroll;
                    margin-bottom:vh(30);
                    .item-box{
                        width:50%;
                        margin-top:5px;
                        line-height:vh(25);
                        .label-box{
                            text-align: right;
                            color: #9fabb9;
                            font-weight: 600;
                            padding-right: 5px;
                        }
                        .value-box{
                            padding-left: 5px;
                            // align-self:center;
                        }
                    }
                }
                .PoiInfoItem {
                    // width:140px;
                    width: 100%;
                    // height:vh1(120);
                    // float:left;
                    text-align: left;
                    margin-bottom: vh(5);

                    p {
                        min-height: vh(30);
                        line-height: vh(30);
                        color: #afffff;
                        font-size: vw(16);

                        // text-align:justify;
                        // text-justify:distribute-all-lines;
                        // text-align-last:justify;
                        p {
                            width: 100%;
                            // overflow: hidden;
                            // white-space: nowrap;
                            // text-overflow: ellipsis;
                        }
                    }

                    div {
                        // width:140px;
                        width: 100%;
                        min-height: vh(30);
                        line-height: vh(30);
                        font-size: vw(16);
                        //text-indent: vw(40);
                        color: #fff;
                        background: rgba(19, 62, 76, 0.5);
                        //overflow: hidden;
                        // text-overflow: ellipsis;
                        // white-space: nowrap;
                    }
                }

                .PoiInfoItem:nth-of-type(even) {
                    // float: right;
                }
            }
        }

        #infoBox1 {
            display: none;
        }

        #infoBox2 {
            display: none;
        }

        #infoBox4 {
            display: none;
        }
        #infoBox6 {
            display: none;
        }
        #infoBox3 {
            display: none;
            .exportEvent {
                display: flex;

                div {
                    height: vh(30);
                    line-height: vh(30);
                    border: 1px solid #ddd;
                    text-align: center;
                    font-size: vw(15);
                    border-radius: 5px;
                    width: vw(100);
                    margin-right: vw(20);
                }
            }
        }
    }

    .sjzxLeft {
        position: absolute;
        z-index: 3;
        top: vh(105);
        // left: vw(24);
        width: vw(400);
        height: vh(970);
        box-sizing: border-box;
        background-image: url('/images/sjzx/leftPanel.png') no-repeat;
        background-size: 100% 100%;
        // background-color:rgba(6,6,72,.7);
        // padding-left: vw(24);
        // padding-left: vw(22);
        // padding-right: vw(22);
        // padding-top: vh(20);
    }

    .sjzxRight {
        position: absolute;
        top: vh(80);
        right: vw(0);
        // padding-right:vw(10)
        width: vw(400);
        z-index: 1;
        height: vh(990);
        box-sizing: border-box;
        // background-color:rgba(6,6,72,.7);
    }

    .sjzxBasicDetail {
        position: absolute;
        z-index: 2;
        top: vh(105);
        left: vw(420);
        width: vw(389);
        height: vh(965);
        box-sizing: border-box;
        background: url('/images/sjzx/leftPanel.png') no-repeat;
        background-size: 100% 100%;
        padding-left: vw(15);
        padding-right: vw(12);
        padding-top: vh(20);
        display: inline-block;
    }

    .toLeft {
        width: vw(40);
        height: vh(40);
        background: url('/images/sjzx/rollLeft.png') no-repeat;
        background-size: 100% 100%;
        position: absolute;
        left: vw(420);
        top: vh(105);
        cursor: pointer;
        z-index: 3;
        transition: all 0.5s;
    }

    .leftButtonChange {
        left: vw(26);
        transition: all 0.5s;
        background: url('/images/sjzx/rollRight.png') no-repeat;
        background-size: 100% 100%;
    }

    .themePicTitle {
        position: absolute;
        left: vw(470);
        top: vh(105);
        cursor: pointer;
        z-index: 2;
        transition: all 0.5s;
        font-family: 'SimSun';
        font-size: vw(25);
        height: vh(40);
        line-height: vh(40);
    }

    .themePicTitleChange {
        left: vw(70);
        transition: all 0.5s;
    }

    .toRight {
        width: vw(40);
        height: vh(40);
        background: url('/images/sjzx/rollRight.png') no-repeat;
        background-size: 100% 100%;
        position: absolute;
        right: vw(400);
        z-index: 2;
        top: vh(85);
        cursor: pointer;
        transition: all 0.5s;
        display: inline-block;
    }

    .rightButtonChange {
        right: vw(26);
        transition: all 0.5s;
        background: url('/images/sjzx/rollLeft.png') no-repeat;
        background-size: 100% 100%;
    }
}
</style>
<style lang="stylus" scoped>
 ;

@media (min-width: 3000px) {
    .sjzxLeft {
        leftContent3840();
    }

    .sjzxRight {
        rightContent3840();
    }
}
</style>
